<template>
    <div>
        <van-nav-bar title="当前城市" 
        fixed
        left-arrow
        @click-left="onClickLeft"/>

        <form action="/">
            <van-search
                background="#f4f4f4"
                v-model="value"
                placeholder="输入城市名或拼音"
                show-action
                @cancel="onCancel"
                @keyup="search"
            />
        </form>
        <div class="van-city" v-if="!isearch">
            <div class="hotcity">
                <p class="hot">热门城市</p>
                <div class="container">
                    <div class="city-item" v-for="(item,index) of hotCities" :key="index" @click="selectCity(item.name)">
                        {{item.name}}
                    </div>
                </div>
            </div>
            <van-index-bar :index-list="indexList" >
                <div v-for="(item,index) of indexList" :key="index">
                    <van-index-anchor :index="item"/>
                    <van-cell :title="value.name"  v-for="(value,i) of cities[item]" :key="i" @click="selectCity(value.name)"/>
                </div>
            </van-index-bar>
        </div>

        <div class="s-city" v-else>
            <div v-for="item of searchcity(value)" :key="item.id">
                <van-cell :title="item.name" @click="selectCity(item.name)"></van-cell>
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        data(){
            return {
                cities:{},
                hotCities:[],
                value:"",
                isearch:false,
            }
        },
        computed:{
            /* 这个数组里装的是A~Z */
            indexList(){
                let list = []
              Object.keys(this.cities).forEach(key=>{
                    list.push(key);
                });
                return list;
            },
            /* 这里装着所有城市 */
            allcities(){
                let cities = [];
                for(var i in this.cities){
                    this.cities[i].forEach(item=>{
                        cities.push(item);
                    })
                }
                return cities;
            }
        },
        mounted(){
            this.axios.get("http://localhost:8081/api/index").then(res=>{
                this.cities = res.data.data.cities;
                this.hotCities = res.data.data.hotCities;
            })
        },
        methods:{
            onCancel(){
                this.isearch = false;
            },
            search(){
                this.isearch = true;
            },
            onClickLeft(){
                this.$router.back();
            },
            searchcity(value){
                return this.allcities.filter(item=>{
                   return  item.name.includes(value);
                })
            },
            selectCity(city){
                this.$store.commit('changeCity',city);
                this.$router.push('/films/nowplaying')
            }
        }
    }
</script>

<style scoped>
    .van-index-bar >>> .van-index-anchor{
        background: #f4f4f4
    }
    .van-search >>> .van-cell {
        background:#ffffff;
    }
     .van-cell >>> .van-field__left-icon{
         margin-left: 10px;
     }
    form{
        position: fixed;
        top: 45px;
        width: 100%;
        z-index: 100
    }
    .van-search__content{
        padding-left: 0
    }
    .van-city{
        padding-top: 99px;
    }
    .hotcity{
        padding-top: 15px;
        padding-left: 15px;
    }
    .hot{
        font-size: 13px;
        color: #797D82;
        margin-bottom: 10px;
    }
    .container{
        padding-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
    }
    .city-item{
        height: 30px;
        background-color: #f4f4f4;
        line-height: 30px;
        border-radius: 3px;
        box-sizing: border-box;
        margin: 6px 7.5px;
        font-size: 14px;
        color: #191a1b;
        width: 100px;
        text-align: center;
    }
    .s-city{
        padding-top: 99px;

    }
    .van-cell{
        border-bottom: 1px solid #ededed;
    }
</style>